<template>
  <div id="sellerOrderToCancel">
    <h3>订单数据</h3>
    <div class="search">
      <el-select v-model="searchData.type" size="mini">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="searchData.value"
        placeholder="请输入内容"
        size="mini"
      ></el-input>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="退保申请" name="toCance">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="已退保" name="toCanceled">
          <SellerOrderData />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagesData.currentPage"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pagesData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagesData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SellerOrderData from "./SellerOrderData.vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "Sellers"
);
export default {
  components: {
    SellerOrderData,
  },
  data() {
    return {
      id: localStorage.salesmansId,
      activeName: "toCancel",
      options: [
        {
          value: "sellersName",
          label: "姓名",
        },
        {
          value: "sellersAccount",
          label: "账号",
        },
      ],
      searchData: {
        type: "sellersName",
        value: "",
      },
    };
  },
  created() {
    this.getSellersOrderById({ _id: this.id, active: this.activeName });
  },
  computed: {
    ...mapState(["pagesData"]),
  },

  methods: {
    ...mapActions(["getSellersOrderById"]),
    ...mapMutations(["changePageSize", "changeCurrentPage"]),

    handleClick(tab, event) {
      this.changeCurrentPage(1);
      this.getSellersOrderById({ _id: this.id, active: this.activeName });
    },

    handleSizeChange(val) {
      this.changePageSize(val);
      this.getSellersOrderById({ _id: this.id, active: this.activeName });
    },

    handleCurrentChange(val) {
      this.changeCurrentPage(val);
      this.getSellersOrderById({ _id: this.id, active: this.activeName });
    },
  },

  watch: {
    searchData: {
      handler(value) {
        this.changeCurrentPage(1);
        // this.showSellersOrders(this.activeName);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
#sellerOrderToCancel {
  h3 {
    margin-bottom: 10px;
  }
  .el-button {
    margin: 5px;
  }
  .el-table th,
  .el-table td {
    text-align: center;
    padding: 5px 0;
  }
  .search {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .el-select {
      width: 80px;
      margin-right: 5px;
      .el-input {
        width: 100%;
      }
    }
    .el-input {
      width: 30%;
    }
  }
  .avatar {
    width: 360px;
    height: 200px;
    display: block;
  }

  .el-form {
    padding: 30px 0;
    .input-box {
      display: flex;
      justify-content: space-evenly;
      .el-input {
        width: 260px;
      }
      .img-upload {
        h3 {
          margin-bottom: 10px;
        }
        text-align: center;
      }
    }
    .el-form-item__content {
      margin: 0;
    }
  }
}
</style>